<template>
  <div>
    <Header ref="header"></Header>
    <!--    <el-autocomplete-->
    <!--        popper-class="my-autocomplete"-->
    <!--        v-model="state"-->
    <!--        :fetch-suggestions="querySearch"-->
    <!--        placeholder="请输入内容"-->
    <!--        @select="handleSelect">-->
    <!--      <i-->
    <!--          class="el-icon-edit el-input__icon"-->
    <!--          slot="suffix"-->
    <!--          @click="handleIconClick">-->
    <!--      </i>-->
    <!--      <template slot-scope="{ item }">-->
    <!--        <div class="name">{{ item.value }}</div>-->
    <!--        <span class="addr">{{ item.address }}</span>-->
    <!--      </template>-->
    <!--    </el-autocomplete>-->
    <!--广告-->
    <div style=" width:1200px; margin:0px auto; margin-top:20px;">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item , index) in adList" :key="index">
          <a :href="item.link">
            <img :src="item.img" style='width: 100%;height: 100%;object-fit: cover;'/>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--容器-->
    <div style="width: 1200PX; min-height:500px; margin:0px auto;">

      <!--课程列表-->
      <div style="width: 850PX;display: inline-block;  ">
        <el-tabs v-model="activeName">
          <el-tab-pane label="选课" name="allLesson">
            <ul class="course-ul-pc">
              <!-- 课程信息展示开始 -->
              <li class="course-li" v-for="(item , index) in courseList" :key="index">
                <!-- 课程封面图 -->
                <img
                    :src="item.courseImgUrl"
                    class="teacher-portrait hover-pointer"
                />
                <!-- 课程文字信息 -->
                <div class="content-main">
                  <!-- 课程标题 -->
                  <div class="content-title hover-pointer">
                    <div
                        class="p-title"
                        style="text-align:left;"
                        @click="gotoDetail(item,JSON.stringify(ids).indexOf(item.id)>=0)"
                    >
                    <span>
                      {{ item.courseName }}
                    </span>
                    </div>
                    <!-- 作者和职称 -->
                    <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{ item.teacher.teacherName }}
                    </span>
                      <span class="p-author-line"/>
                      <span class="p-author-span">
                      {{ item.teacher.position }}
                    </span>
                    </p>
                    <p></p>
                    <!-- 课程简单描述 -->
                    <p class="p-describe" style="text-align:left;">
                      {{ item.brief }}
                    </p>
                  </div>
                  <!-- 课程前两个章节信息 -->
                  <ul v-if="item.courseSections[0]" class="content-course" style="text-align:left;">
                    <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                    <li
                        class="content-course-lesson text-overflow"
                        style="width:300px"
                        v-for="(lesson , index) in item.courseSections[0].courseLessons.slice(0,2)" :key="index">
                      <!-- 免费试看图标 -->
                      <img
                          src="@/assets/course-list/free-course.png"
                          class="free-label hover-pointer"
                      />
                      <span class="theme-span hover-pointer">
                      {{ lesson.theme }}
                      </span>
                    </li>

                  </ul>
                  <!-- 价格信息 -->
                  <div class="content-price" style="text-align:left;">
                    <p class="content-price-p">
                      <span class="content-price-orange-sm">￥</span>
                      <span class="content-price-orange">{{ item.discounts }}</span>
                      <span class="current-price">
                      <span class="current-price-unite">￥</span>
                      {{ item.price }}
                    </span>
                      <span class="activity-name">成就自己</span>
                      <span class="content-price-buy">{{ item.sales }}人购买</span>
                    </p>
                    <div class="btn btn-yellow btn-offset" v-if="JSON.stringify(ids).indexOf(item.id)>=0">好好学习</div>
                    <div class="btn btn-green btn-offset" v-else @click="buy(item)">立即购买</div>
                  </div>
                </div>
              </li>
              <!-- 课程信息结束 -->

            </ul>

            <!-- 微信支付二维码-->
            <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelOrder" :modal="true"
                       :close-on-click-modal="false" style="width:800px;margin:0px auto;">
              <h1 style="font-size:30px;color:#00B38A">微信扫一扫支付</h1>
              <div id="qrcode" style="width:210px;margin:20px auto;"></div>
              <h2 id="statusText"></h2>
              <p id="closeText"></p>
            </el-dialog>

          </el-tab-pane>
          <el-tab-pane label="已购" name="hasPay">
            <div v-if="!isLogin">
              <img src="@/assets/course-list/no-login@2x.png" class="no-data-icon"/>
              <div class="no-data-title">您还没有登录</div>
              <div class="no-data-title">登录后即可查看已购课程</div>
              <div class="btn btn-yellow btn-center" @click="goToLogin">立即登录</div>
            </div>
            <div v-if="isLogin">
              <ul class="course-ul-pc">
                <!-- 课程信息展示开始 -->
                <li class="course-li" v-for="(item , index) in myCourseList" :key="index">
                  <!-- 课程封面图 -->
                  <img
                      :src="item.courseImgUrl"
                      class="teacher-portrait hover-pointer"
                  />
                  <!-- 课程文字信息 -->
                  <div class="content-main">
                    <!-- 课程标题 -->
                    <div class="content-title hover-pointer">
                      <div
                          class="p-title"
                          style="text-align:left;"
                          @click="gotoDetail(item,JSON.stringify(ids).indexOf(item.id)>=0)"
                      >
                    <span>
                      {{ item.courseName }}
                    </span>
                      </div>
                      <!-- 作者和职称 -->
                      <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{ item.teacher.teacherName }}
                    </span>
                        <span class="p-author-line"/>
                        <span class="p-author-span">
                      {{ item.teacher.position }}
                    </span>
                      </p>
                      <p></p>
                      <!-- 课程简单描述 -->
                      <p class="p-describe" style="text-align:left;">
                        {{ item.brief }}
                      </p>
                    </div>
                    <!-- 课程前两个章节信息 -->
                    <ul class="content-course" style="text-align:left;">
                      <!-- 章节1 : 免费试看，通常是第一章的前两节课 -->
                      <li
                          class="content-course-lesson text-overflow"
                          style="width:300px"
                          v-for="(lesson , index) in item.courseSections[0].courseLessons.slice(0,2)" :key="index">
                        <!-- 免费试看图标 -->
                        <img
                            src="@/assets/course-list/free-course.png"
                            class="free-label hover-pointer"
                        />
                        <span class="theme-span hover-pointer">
                      {{ lesson.theme }}
                      </span>
                      </li>

                    </ul>
                    <!-- 价格信息 -->
                    <div class="content-price" style="text-align:left;">
                      <p class="content-price-p">
                        <span class="content-price-orange-sm">￥</span>
                        <span class="content-price-orange">{{ item.discounts }}</span>
                        <span class="current-price">
                      <span class="current-price-unite">￥</span>
                      {{ item.price }}
                    </span>
                        <span class="activity-name">成就自己</span>
                        <span class="content-price-buy">{{ item.sales }}人购买</span>
                      </p>
                      <div class="btn btn-yellow btn-offset">好好学习</div>
                    </div>
                  </div>
                </li>
                <!-- 课程信息结束 -->

              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--微信连接-->
      <div style="width:330px; height:350px; display: inline-block; float:right; ">
        <p class="title">精选文章</p>
        <ul class="article-content"></ul>
        <p class="split-line" style="margin-bottom:20px;">
          <span class="split-word">还可以在这里找到我们</span>
        </p>
        <ul class="social-list">
          <li class="social-item">
            <div id="qr-wrapper" class="qr-wrapper" style="display: none;" @mouseout="hideqr()">
              <img src="../assets/wechat-qr.47ac3f5.png" alt="二维码" class="qr-wrapper-img">
            </div>
            <img @mouseover="showqr()"
                 src=""
                 alt="微信" class="social-item-img">
            <p class="social-name">微信</p>
          </li>
          <li class="social-item hover-pointer" @click="gozhihu()">
            <img
                src=""
                alt="知乎" class="social-item-img">
            <p class="social-name">知乎</p>
          </li>
          <li class="social-item hover-pointer" @click="gowb()">
            <img
                src=""
                alt="微博" class="social-item-img">
            <p class="social-name">微博</p>
          </li>
        </ul>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
import QRCode from 'qrcodejs2'; // 引入qrcodejs
import qs from 'qs';
import orderApi from "@/api/order/orderApi";

export default {
  name: "Index",
  components: {
    Header,
    Footer,
    QRCode // 声明组件
  },
  data() {
    return {
      // salt: null,
      jwt: null,
      activeName: "allLesson",
      courseList: [],  // 课程集合
      myCourseList: [], // 我购买过的课程列表
      isLogin: false, //登录状态
      user: null, // 已登录的用户对象信息
      myCourseIds: {myCourseIds: ""}, // 登录用户购买成功的课程编号集合
      adList: [],
      dialogFormVisible: false, //默认false：隐藏，true：显示
      time: null,// 计时对象
      orderNo: "",// 订单编号
      course: null,
      restaurants: [],
      payOrderVo: {},
      state: '',
      ids: []
    };
  },
  created() {
    this.getAdList();
    this.getCourseList(); //当组件创建完毕，就调用获取所有课程的方法
    this.jwt = localStorage.getItem("jwt");
    if (this.jwt != null && this.jwt != "null") {
      // this.salt = JSON.parse(localStorage.getItem("salt"));
      this.isLogin = true; //已登录
      //this.getMyCourseList(); // 调用查询我购买的课程方法
      this.getMyCourseList(); // 获取已购课程id
    }
  },
  methods: {

    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    changeCourseTab(tabName) {
      this.classSelect = tabName;
      sessionStorage && sessionStorage.setItem("courseTab", tabName);
    },
    goToLogin() {
      this.$refs.header.goToLogin();
    },
    //去课程详情页
    gotoDetail(item, status) {
      console.log(status)
      this.$router.push({
        name: "Course", params: {
          course: item,
          status: status
        }
      });
    },
    // 获取全部课程信息
    getCourseList() {
      return this.axios
          .get("http://localhost:9000/course/course/getAllCourse")
          .then((result) => {
            this.courseList = result.data.data.items;
            console.log(this.courseList);
            //console.log(this.courseList[0].courseSections[0].courseLessons.slice(0,2))
          }).catch((error) => {
            this.$message.error("获取全部课程信息失败！");
          });
    },
    // 获取顶部轮播广告
    getAdList() {
      return this.axios
          .get("http://localhost:9000/ad/ad/getAdsBySpaceId/" + 1)
          .then((result) => {
            // console.log(result.data.data.items);
            this.adList = result.data.data.items;
          }).catch((error) => {
            this.$message.error("获取轮播广告失败！");
          });
    },
    // 获取登录用户购买成功的课程信息
    getMyCourseList() {
      // console.log("!!!!!!!!"+this.myCourseIds)
      orderApi.getMyCourseList()
          .then((result) => {
            //console.log(result);
            this.myCourseList = result.data.items;
            if (this.myCourseList) {
              for (const myCourseListElement of this.myCourseList) {
                this.ids.push(myCourseListElement.id)
              }
            }
            console.log("this.ids" + this.ids)
          }).catch((error) => {
        this.$message.error("获取已购买的课程信息失败！");
      });
    },
    // 显示微信公众号二维码
    showqr() {
      document.getElementById("qr-wrapper").style.display = "block";
    },
    // 隐藏微信公众号二维码
    hideqr() {
      document.getElementById("qr-wrapper").style.display = "none";
    },
    // 跳转到知乎
    gozhihu() {
      window.open('https://www.zhihu.com/org/la-gou-kai-wu-xun-lian-ying');
    },
    // 跳转到微博
    gowb() {
      window.open('https://weibo.com/p/1006066707072494/home?from=page_100606&mod=TAB&is_hot=1#place');
    },
    // 购买课程
    buy(course) {
      if (this.jwt != null && this.jwt != "null") {
        this.course = course;
        //alert("购买第【" + courseid + "】门课程成功，加油！");
        this.dialogFormVisible = true; //显示提示框
        // 待dom更新之后再用二维码渲染其内容
        this.$nextTick(function () {
          this.createCode(); // 直接调用会报错：TypeError: Cannot read property 'appendChild' of null
        });
      } else {
        this.$message.error("购买失败，请先登录！");
      }

    },
    // 生成二维码
    createCode() {
      // 将上一次的二维码清除，防止出现多个二维码
      document.getElementById("qrcode").innerHTML = "";
      orderApi.createCode(this.course.id, this.course.courseName, 1)
          .then((result) => {
            console.log(result);
            // QRCode(存放二维码的dom元素id，二维码的属性参数)
            let qrcode = new QRCode('qrcode', {
              width: 200,
              height: 200,
              text: result.data.item.code_url  // 将返回的数据嵌入到二维码中
            });
            this.orderNo = result.data.item.orderId;
            orderApi.checkOrderStatus(result.data.item.orderId)
                .then((result) => {
                  console.log("item" + result.data.item);
                  if (result.data.item.trade_state == "SUCCESS") {
                    document.getElementById("statusText").innerHTML = "<i style='color:#00B38A' class='el-icon-success'></i> 支付成功！";
                    // 支付成功
                    // this.updateOrder(20);
                    // 3秒后关闭二维码窗口
                    let s = 5;
                    // this.closeQRForm(s);
                    this.getMyCourseList();
                    window.location.reload();
                    this.getMyCourseList();
                    // this.$router.go(0);//刷新页面

                  } else if (result.data.item.trade_state == "NOTPAY") {
                    document.getElementById("statusText").innerHTML = "<i style='color:#00B38A' class='el-icon-success'></i> 未支付！";
                    // this.updateOrder(10);
                    let s = 5;
                    // this.closeQRForm(s);
                    this.getMyCourseList();
                    window.location.reload();
                    // this.$router.go(0);//刷新页面
                    this.getMyCourseList();
                    // window.location.reload();
                  }
                })
                .catch((error) => {
                  console.log(error)
                  this.$message.error("查询订单失败！");
                });
          })
          .catch((error) => {
            this.$message.error("生成二维码失败！");
            console.log(error);
          });
    },
    // 倒计时关闭二维码窗口
    closeQRForm(s) {
      let that = this;
      that.time = setInterval(function () {
        document.getElementById("closeText").innerHTML = "( " + s-- + " ) 秒后关闭本窗口";
        if (s == 0) {
          clearInterval(that.time); // 停止计时器
          that.dialogFormVisible = false; // 二维码窗口隐藏
          that.isBuy = true; // 修改购买状态（已购买）
          this.getMyCourseList();
        }
      }, 1000);


      this.$router.go(0);//刷新页面
    },
    // 保存订单
    saveOrder() {
      // return this.axios
      //     .get("http://localhost:9000/order/order/saveOrder", {
      //       params: {
      //         orderNo: this.orderNo,
      //         courseId: this.course.id,
      //         activityCourseId: this.course.id,
      //         source: 1,
      //         amount: 1
      //       }
      //     })
      this.payOrderVo.orderNo = this.orderNo;
      this.payOrderVo.courseId = this.course.id;
      this.payOrderVo.activityCourseId = this.course.id;
      this.payOrderVo.source = 1;
      this.payOrderVo.amount = 1;
      orderApi.saveOrder(this.payOrderVo)
          .then((result) => {
            // console.log(result);
            console.log("保存订单");
          })
          .catch((error) => {
            this.$message.error("保存订单失败！");
          });
    },
    // 更新订单的状态
    updateOrder(statusCode) {
      return this.axios
          .get("http://localhost:9000/order/order/updateOrder", {
            params: {
              orderNo: this.orderNo,
              status: statusCode,
              // user_id: this.user.content.id,
              course_id: this.course.id,
              course_name: this.course.name,
              price: 1
            }
          })
          .then((result) => {
            console.log("更新订单【" + this.orderNo + "】状态：" + statusCode);
          }).catch((error) => {
            this.$message.error("更新订单失败！");
          });
    },
    // 取消订单
    cancelOrder() {
      this.dialogFormVisible = false;
      // return this.axios
      //     .get("http://localhost:9000/order/order/deleteOrder", {
      //       params: {
      //         orderno: this.orderNo,
      //       }
      //     })
      //     .then((result) => {
      //       // console.log(result);
      //       console.log("取消订单");
      //     })
      //     .catch((error) => {
      //       this.$message.error("取消订单失败！");
      //     });
    }
  },

};
</script>

<style lang="less" scoped>
@import "../assets/less/common.less";

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.qr-wrapper {
  position: absolute;
  width: 140px;
  height: 140px;
  display: block;
  z-index: 10;
  background: #fff;
  border: 1px solid #e3ebe9;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08);
  border-radius: 3px;
  box-sizing: border-box;
  left: -30px;
  top: -150px;
}

p {
  margin-top: 0;
}

li {
  list-style: none;
}

.social-item {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 62px;
}

.social-item-img {
  width: 32px;
  height: 32px;
}

.split-word {
  display: inherit;
  color: #999;
  font-size: 14px;
  margin: 0 10px;
  position: relative;
}

.split-word:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 1px;
  background-color: #d8d8d8;
  margin: 10px 0 0 -44px;
}

.split-word:after {
  margin: 10px 0 0 13px;
  content: "";
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 1px;
  background-color: #d8d8d8;
}

.article-content {
  font-size: 14px;
  margin-bottom: 40px;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}

flex {
  display: flex;
}

.btn(@a, @b) {
  background-color: @a;
  color: @b;
  border: 1px solid @a;
}

.course-ads {
  margin-bottom: 20px;
  cursor: pointer;
  width: 100%;
  max-height: 280px;
  overflow: hidden;

  img {
    width: 100%;
    border-radius: 2px;
  }
}

.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}

.vux-tab.course-tab {
  box-sizing: border-box;
  height: 60px;
  width: 200px;
  overflow: hidden;
  font-size: 20px;

  .vux-tab-container {
    width: 260px;
  }

  .vux-tab-item {
    cursor: pointer;
    background: none;
    line-height: 60px;
    font-size: 20px;
  }

  .vux-tab-ink-bar {
    bottom: -1px;

    .vux-tab-bar-inner {
      height: 2px;
    }
  }
}

.tab-container {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #ededed;
}

.course-ul {
  padding: 0 20px;
}

.hover-pointer {
  cursor: pointer;
}

.course-ul-pc .course-li {
  padding: 30px 0 40px 0;
  border-bottom: 1px solid #ededed;
  position: relative;

  &:last-child {
    border-bottom: 0;
  }
}

.current-price {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  text-decoration: line-through;
}

.current-price-unite {
  font-size: 12px;
  margin-right: -4px;
}

.p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}

.teacher-portrait {
  width: 121px;
  height: 159px;
  border-radius: 4px;
  float: left;
}

.content-main {
  line-height: 1.4;
  margin-left: 141px;
  position: relative;
  height: 150px;
}

.content-main .p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}

.course-ul-pc .content-main .p-title-buy {
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  float: right;
  top: -28px;
  font-weight: 400;
}

p {
  margin-top: 0;
}

.course-ul-pc .p-author-line {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  position: absolute;
  background: #999;
  margin-left: 5px;
  top: 3px;
}

.text-overflow {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.course-ul-pc .content-main .p-describe {
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.course-ul-pc .content-main .p-author-span:not(:first-child) {
  margin-left: 18px;
}

.course-ul-pc .content-main .content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}

.course-ul-pc .content-main .content-course .free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}

.course-ul-pc .content-main .content-course-lesson:nth-child(2n) {
  margin-right: 0;
}

.course-ul-pc .content-main .content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}

.course-ul-pc .content-main .content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}

.course-ul-pc .content-main .content-price-p {
  font-size: 0;
}

.course-ul-pc .content-main .content-price-orange-sm {
  color: #ff7452;
  font-size: 14px;
}

.content-course {
  font-size: 14px;
  padding-top: 25px;
  color: #666;
}

.content-course.free-label {
  width: 50px;
  height: 16px;
  margin: 1px 5px 0 0;
}

.content-course-lesson {
  display: inline-block;
  width: 304px;
  margin: 2px 40px 6px 0;
}

.content-course-lesson:nth-child(2n) {
  margin-right: 0;
}

.disabled-word {
  color: #999;
  cursor: default;
}

.theme-span :hover {
  color: #0abf89;
}

.content-price-p {
  font-size: 0;
}

.content-price-orange {
  color: #ff7452;
  font-size: 20px;
}

.content-price-buy {
  font-size: 14px;
  color: #999;
  margin-left: 20px;
  transform: translate(8px, -2px);
  display: inline-block;
}

.content-price-grey {
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}

.content-price-buyed {
  color: #999;
  font-size: 14px;
}

.content-price {
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  bottom: -4px;
}

.activity-name {
  font-size: 12px;
  line-height: 14px;
  color: rgba(255, 255, 255, 1);
  padding: 2px 4px;
  background: linear-gradient(180deg,
  rgba(255, 137, 110, 1) 0%,
  rgba(255, 123, 92, 1) 100%);
  border-radius: 2px;
  display: inline-block;
  transform: translate(6px, -3px);
}

.p-title {
  font-size: 20px;
  color: #333;
  font-family: PingFangSC-Medium, PingFang SC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}

.p-title-dec {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.p-title-buy {
  // .font(12px);
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-top: 6px;
  position: relative;
  // .fr;
  top: -28px;
  font-weight: normal;
}

.companion-reading {
  background: rgba(0, 179, 138, 0.06);
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #00b38a;
  display: inline-block;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
  vertical-align: text-bottom;
  position: relative;

  .triangle {
    position: absolute;
    top: 12px;
    left: -3px;
    width: 0;
    height: 0;
    content: "";
    border: 5px solid;
    border-color: transparent transparent white white;
    transform: rotate(45deg);
    box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.08);
  }
}

.companion-tip {
  display: none;
  position: absolute;
  font-family: HiraginoSansGB-W3;
  font-size: 14px;
  color: #777777;
  background: #ffffff;
  border: 1px solid #e3ebe9;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  line-height: 29px;
  top: -7px;
  word-break: keep-all;
  left: 80px;
  padding: 0 10px;
  width: 200px;
  z-index: 2;
}

.companion-reading:hover .companion-tip {
  display: inline-block;
}

.companion-reading:hover .companion-tip {
  display: block;
}

.p-describe {
  // .font(14px);
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  // .text-overflow;
}

.p-author + p {
  margin-top: 0;
}

.p-author {
  margin: 10px 0 5px 0;
  // .font(12px);
  font-size: 12px;
  color: #999;
  position: relative;

  .p-author-line {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    position: absolute;
    background: #999;
    margin-left: 5px;
    top: 3px;
  }
}

.p-author-span:not(:first-child) {
  margin-left: 18px;
}

.course-ul-container {
  width: 850px;
  display: inline-block;
  float: left;
}

.course-ul {
  padding: 0 20px;
}

.course-ul-pc {
  width: 790px;
  background-color: #fff;
  padding: 0 30px;
  // .fl;
}

.tag-icon {
  width: 57px;
  height: 18px;
  position: absolute;
  top: 30px;
  left: 0;
}

.more-icon {
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.btn {
  width: 94px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  box-sizing: content-box;

  &-green {
    .btn(#00b38a, #fff);

    &:hover {
      background: #00a57f;
      border-color: #00a57f;
    }
  }

  &-yellow {
    .btn(#fcd766, #fff);

    &:hover {
      background: #f0d071;
      border-color: #f0d071;
    }
  }

  &-white {
    .btn(#fff, #00b38a);
    border: 1px solid #00b38a;

    &:hover {
      color: #fff;
      border-color: #00b38a;
      background-color: #00b38a;
    }
  }

  &-offset {
    position: absolute;
    right: 0;
    top: -4px;
  }
}

.btn-center {
  margin: 10px auto;
}

.no-data-title {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}
</style>
